<template>
  <el-container class="login-one">
    <el-header></el-header>
    <el-main>

      <br> <br> <br> <br> <br>
      <el-row>
        <el-col :span="8">&nbsp;</el-col>
        <el-col :span="8" style="background-color: white;border-radius: 5%;height: 350px;">
          <!-- label="loginForm.title" 进行绑定 点击不同登录事件时 切换 -->
          <h3 align="center">{{loginForm.title}}</h3>

          <el-form ref="form" label-width="80px">
            <br>
            <!-- label="loginForm.accountNameTitle" 进行绑定 点击不同登录事件时 切换 -->
            <el-form-item :label="loginForm.accountNameTitle">
              <el-col :span="22">
                <el-input  :placeholder="loginForm.nameInfo" v-model="loginForm.accountName"></el-input>
              </el-col>

            </el-form-item>
            <el-form-item :label="loginForm.pwdTitle">
              <el-col :span="loginForm.num">
                <el-input :placeholder="loginForm.pwdInfo" v-model="loginForm.pwd" ></el-input>
              </el-col>
              <el-col :span="11">
                 <el-button type="success" round v-show="loginForm.ok" @click="sendCode()">发送验证码</el-button>
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-row>
                <el-button size="mini" type="primary" icon="el-icon-check" round @click="accountLogin()">账号登录</el-button>
                <el-button size="mini" type="success" icon="el-icon-check" round @click="emailLogin()">邮箱登录</el-button>
                <el-button size="mini" type="info" icon="el-icon-check" round @click="phoneLogin()">短信登录</el-button>
              </el-row>
            </el-form-item>

            <el-form-item>
              <el-row>
                  <el-button type="primary" @click="login()" style="margin-left: 80px;">登录</el-button>
                  <el-button type="success" @click="register()">注册</el-button>
              </el-row>
            </el-form-item>

          </el-form>
        </el-col>
        <el-col :span="8">&nbsp;</el-col>
      </el-row>



    </el-main>
  </el-container>
</template>

<script>
  //引入工具对象myUtil.js  就可以调用其对象myUtil.url和方法myUtil.add
  import myUtil from '../../util/myUtil'
  //引入vue的axios模块
  import axios from 'axios'
  //如果是post请求 需要引入qs模块、
  import Qs from 'qs'
  export default {
    data(){
      return {
        loginForm:{
            title:"账号登录",
            accountName:"",//用户名userName 、邮箱地址email、电话号码phone
            pwd:"",// 账户密码pwd 、邮箱验证码code、短信验证码code
            accountNameTitle:"用户名",
            pwdTitle:"密码",
            nameInfo:"请输入用户名",
            pwdInfo:"请输入密码",
            ok:false,
            num:22,
        },
      }
    },
    methods:{
      login(){
        var mythis=this;
        if(this.loginForm.accountName !=""
            && this.loginForm.pwd !="" ){
             if(this.loginForm.title=="邮箱验证登录"){
                   confirm("邮箱验证登录！！");
                   //第一种解决登录验证问题方法 根据cookie获取设置的session email键 以键获取验证码valCode值
                   //设置axios允许携带cookie请求  ********
                 // axios.defaults.withCredentials=true;
                 // axios.get(
                 // myUtil.url+"/user-info/loginEmail",
                 // {params:{
                 //   "email":mythis.loginForm.accountName,
                 //   "code":mythis.loginForm.pwd
                 // }}
                 // ).then(function(rs){
                 //    if(rs.data.info=="邮箱登陆成功"){
                 //      console.log(rs.data.info);
                 //    }else{
                 //      console.log(rs.data.info);
                 //    }
                 // });
                   //第二种解决登录验证问题方法 根据键email 获取存在redis数据库中的验证码值code
                   //提前打开redis数据库服务  ********
                     axios({
                       url:myUtil.url+"/user-info/loginEmailRedis",
                       method:"post",
                       headers:{
                         'Content-Type':"application/json"
                       },
                       params:{
                         email:mythis.loginForm.accountName,
                         code:mythis.loginForm.pwd
                       }
                     }).then(function(rs){
                       if(rs.data.info=="邮箱登录成功"){
                         console.log(rs.data.info);
                       }else{
                         console.log(rs.data.info);
                       }
                     });
             }else if(this.loginForm.title=="账号登录"){
                    confirm("账号登录！！")
                    console.log(this.loginForm.accountName);
                    axios({
                      headers:{
                       'Content-Type':"application/json"
                      },
                      method:"post",
                      url:myUtil.url+"/user-info/loginPost",
                      params:{userName:mythis.loginForm.accountName,userPwd:mythis.loginForm.pwd}//
                    }).then(function(rs){
                      console.log(rs.data.info);
                      // alert(rs.data.info);
                      if(rs.data.info=="登录成功"){
                        //第一种本地存储 将登录成功的返回数据 存储在前端本地
                        localStorage.setItem("userName",mythis.loginForm.accountName);
                        //然后跳到启动主页面
                        mythis.$router.replace("indexElement");
                      }
                    })
             }else{
                    confirm("手机验证登录！！")
                    //第二种解决登录验证问题方法 根据键email 获取存在redis数据库中的验证码值code
                    //提前打开redis数据库服务  ********
                      axios({
                        url:myUtil.url+"/user-info/loginSms",
                        method:"post",
                        headers:{
                          'Content-Type':"application/json"
                        },
                        params:{
                          phone:mythis.loginForm.accountName,
                          code:mythis.loginForm.pwd
                        }
                      }).then(function(rs){
                        if(rs.data.info=="手机登录成功"){
                          console.log(rs.data.info);
                        }else{
                          console.log(rs.data.info);
                        }
                      });
             }
             return;
        }else{
          if(this.loginForm.title=="邮箱验证登录"){
              alert("请正确输入邮箱地址和验证码");
          }else if(this.loginForm.title=="账号登录"){
             alert("请正确输入账号和密码")
          }else{
            alert("请正确输入手机号和验证码")
          }
        }
      },
      //注册跳转事件
      register(){
        confirm("去注册！！")
      },
      //发送验证码事件
      sendCode(){
          if(this.loginForm.accountName =="" ){
               if(this.loginForm.title=="邮箱验证登录"){
                 alert("请输入正确邮箱！！");
               }else{
                 alert("请输入正确手机号！！");
               }
               return;
          }
        var mythis=this;
        // var email=this.loginForm.accountName;
        if(this.loginForm.title=="邮箱验证登录"){
                  //第一种解决登录验证问题方法 发送邮件 随机生成code验证码 保存在session valCode键中
                  //发送邮件 get方式   ********
               // axios.defaults.withCredentials=true;
               // axios.get(
               //       myUtil.url+"/user-info/sendEmail",{params:{email:mythis.loginForm.accountName}}
               //       ).then(function(rs){
               //         if(rs.data.info=="邮件发送成功"){
               //           console.log(rs.data.info);
               //         }else{
               //           console.log(rs.data.info);
               //         }
               //       })
                  //第二种解决登录验证问题方法 发送邮件 随机生成code验证码 保存在redis数据库中 eamil键中
                  //提前打开redis数据库服务   ********
                  axios({
                    url:myUtil.url+"/user-info/sendEmailRedis",
                    method:"post",
                    headers:{
                      'Content-Type':"application/json"
                    },
                    params:{
                      email:mythis.loginForm.accountName
                    }
                  }).then(function(rs){
                    if(rs.data.info=="邮箱发送成功"){
                      console.log(rs.data.info);
                    }else{
                      console.log(rs.data.info);
                    }
                  });
          }
          if(this.loginForm.title=="手机验证登录"){
             //第二种解决登录验证问题方法 发送短信 随机生成code验证码 保存在session phone键中
             //提前打开redis数据库服务   ********

              axios({
                url:myUtil.url+"/user-info/sendSms",
                method:"post",
                headers:{
                  'Content-Type':"application/json"
                },
                params:{
                  phone:mythis.loginForm.accountName
                }
              }).then(function(rs){
                if(rs.data.info=="短信发送成功"){
                  console.log(rs.data.info);
                }else{
                  console.log(rs.data.info);
                }
              });
          }

      },
      emailLogin(){//邮箱验证登录页面
       this.loginForm.accountName="";
       this.loginForm.pwd="";
       this.loginForm.title="邮箱验证登录";
       this.loginForm.accountNameTitle="邮箱";
       this.loginForm.pwdTitle="验证码";
       this.loginForm.nameInfo="请输入邮箱";
       this.loginForm.pwdInfo="请输入验证码";
       this.loginForm.ok=true;
       this.loginForm.num=11;
      },
      accountLogin(){//账号登录页面
        this.loginForm.accountName="",
        this.loginForm.pwd="",
        this.loginForm.title="账号登录";
        this.loginForm.accountNameTitle="账号";
        this.loginForm.pwdTitle="密码";
        this.loginForm.nameInfo="请输入账号";
        this.loginForm.pwdInfo="请输入密码";
        this.loginForm.ok=false;
        this.loginForm.num=22;
      },
      phoneLogin(){//短信验证登录页面
        this.loginForm.accountName="",
        this.loginForm.pwd="",
        this.loginForm.title="手机验证登录";
        this.loginForm.accountNameTitle="手机号";
        this.loginForm.pwdTitle="验证码";
        this.loginForm.nameInfo="请输入手机号";
        this.loginForm.pwdInfo="请输入验证码";
        this.loginForm.ok=true;
        this.loginForm.num=11;
      }
    },
    mounted(){
    }
  }
</script>

<style>
  html,
  body {
    height: 100%;
  }

  .login-one {
    background-color: #052d8b;
    background-image: url(../../../static/img/light.png);
    background-size: 1500px,300px;
    background-repeat: no-repeat;
    /*	//background-position:center top;*/
    overflow: hidden;
    height: 100%;
  }
</style>
